<template>
  <div id="box">
    <!-- 导航栏 -->
    <van-nav-bar title="主页" fixed v-if="userlist">
      <template #right v-if="$store.state.user">
        <div v-for="item in userlist" :key="item.userid">
          <van-image
            @click="$router.push('/me')"
            width="35px"
            height="35px"
            round
            :src="`http://39.108.211.154${item.uimg}`"/>
        </div>
      </template>
      <template #right v-else>
        <van-image
          @click="$router.push('/login')"
          width="30px"
          height="30px"
          round
          :src="require('../assets/cs-img/wdl.png')"/>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      v-model="search"
      :search="search"
      @search="$router.push(`/detailedlist?search=${search}`)"
      placeholder="输入关键词搜索"
      style="margin-top: 48px"/>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功">

      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="#fdaf3a" v-if="banners">
        <van-swipe-item v-for="banner in banners" :key="banner.did">
          <img :src="`http://39.108.211.154${banner.dimg}`" @click="$router.push(`/detail?id=${banner.did}`)">
        </van-swipe-item>
      </van-swipe>

      <!-- 首页景点卡片 -->
      <div class="scenic_card" v-if="data">
        <!-- 卡片标题 -->
        <div class="card_title">
          <div>
            <span></span>
            <span>热门精选</span>
          </div>
          <span @click="$router.push('/detailedlist')">更多>></span>
        </div>
        <!-- 卡片内容 -->
        <div class="card_content">
          <div
            class="card"
            v-for="item in data"
            :key="item.lid"
            :item="item"
            @click="$router.push(`/detail?id=${item.lid}`)">
            <img :src="`http://39.108.211.154${item.limg}`" />
            <div>{{ item.title }}</div>
            <p>{{ item.lsyn }}</p>
          </div>
        </div>
      </div>
      <!-- 摄影作品 -->
      <div class="shoot_photo" v-if="photo">
        <div class="shoot_title">
          <div>
            <span></span>
            <span>摄影作品</span>
          </div>
          <span @click="Routervote()">更多>></span>
        </div>
        <div class="shoot_pic" >
          <div class="pic" v-for="item in photo" :key="item.pid">
            <div class="pic_name">{{ item.pname }}</div>
            <img  @click="Routervote()" :src="`http://39.108.211.154${item.photo}`" />
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // 轮播图 图片id存放
      // 需要添加或者切换轮播图, 只需修改数组
      bannerid: ["2", "25", "26", "56"],
      // 轮播图数据
      banners: [],
      // 下拉刷新
      isLoading: false,
      data: null,
      photo: null,
      // 搜索内容
      search: "",
      userlist: null,
    };
  },
  mounted() {
    this.axios.get("http://39.108.211.154:8080/hot").then((res) => {
      this.data = res.data;
    });
    this.axios.get("http://39.108.211.154:8080/index_photo").then((res) => {
      this.photo = res.data;
    });
    this.axios.get(`http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`).then((res) => {
      this.userlist = res.data;
    });
    // 轮播图
    this.bannerid.forEach((item) => {
      this.axios.get(`http://39.108.211.154:8080/detail_text?did=${item}`).then((res) => {
          this.banners.push(res.data[0]);
      });
    });
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.$router.go(0);
      }, 1000);
    },
    Routervote(){
      if(this.$store.state.user){
        this.$router.push('/vote')
      }else{
        Dialog.confirm({
          message: "您还未登录!",
          confirmButtonColor:'rgb(255, 153, 0)',
          confirmButtonText: '去登录',
          width: '75vw'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        });
      }
    }
  },
};
</script>
<style lang="scss" scoped>
#box {
  background-color: rgb(247, 247, 247);
}
// 轮播图样式修改
.van-swipe {
  margin: 8px 12px 0;
  overflow: hidden;
  border-radius: 5px;
  height: 53vw;

  img {
    display: block;
    width: 100%;
  }
  ::v-deep .van-swipe__indicator {
    width: 12px;
    height: 12px;
  }
}
::v-deep.van-swipe__track {
  height: 56vw;
}
// 景点卡片标题样式
.scenic_card {
  margin: 20px 12px 0;
}
.card_title,
.shoot_title {
  line-height: 5vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px solid #fdaf3a;
  margin-top: 20px;
  > div {
    display: inline-block;
  }
  > span {
    font-size: 4vw;
  }
}
.card_title > div > span:nth-child(1),
.shoot_title > div > span:nth-child(1) {
  display: inline-block;
  width: 3vw;
  height: 3vw;
  border-radius: 100%;
  background-color: #fdaf3a;
  margin-right: 8px;
}

.card_title > div > span:nth-child(2),
.shoot_title > div > span:nth-child(2) {
  color: black;
  font-size: 5vw;
  font-weight: bold;
}
// 景点卡片样式
.card_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card {
  width: 49%;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 2vw;
  background-color: #fff;
  > img {
    width: 100%;
    height: 28vw;
  }
  > div {
    color: black;
    font-size: 4vw;
    margin: 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
    font-weight: 600;
    margin: 8px;
  }
  > p {
    font-size: 3vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0 8px 8px;
  }
}
// 摄影作品样式
.shoot_photo {
  margin: 0 12px;
  > .shoot_pic {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > .pic {
      position: relative;
      width: 49%;
      margin-bottom: 2vw;
      overflow: hidden;
      border-radius: 5px;
      > img {
        display: block;
        width: 100%;
        height: 30vw;
      }
      > div {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 4vw;
        color: #fff;
        font-weight: 900;
      }
    }
  }
}
</style>
